/**
 * Created by dazq on 16/11/25.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TextInput
} from 'react-native';

import Button from 'react-native-button'
import CheckBox from 'react-native-checkbox';
import { Scene, Router, TabBar, Modal, Schema, Actions, Reducer, ActionConst } from 'react-native-router-flux'
import NavigationDrawer from './NavigationDrawer'
import TabIcon from './TabIcon'
import IndexComponent from './GTIndex'
import DataInfo from './GTDataInfo'
var {width, height} = Dimensions.get('window')


const reducerCreate = params=>{
    const defaultReducer = Reducer(params);
    return (state, action)=>{
        console.log("ACTION:", action);
        return defaultReducer(state, action);
    }
};

export default class AppIndex extends Component {
    render() {
        return (
            <Router  createReducer={reducerCreate} sceneStyle={{backgroundColor:'#F7F7F7'}} >
                    <Scene key="root" hideNavBar={true}>
                        <Scene key="LoginPage" component={LoginViews} title="登录" initial={true} hideNavBar={true} />
                        <Scene key="indexDrawer" component={NavigationDrawer}>
                            <Scene key="wrapper" >
                                <Scene key="IndexComponent" component={IndexComponent} title="我的产品" hideNavBar={false}/>
                                <Scene key="LoginPages" component={DataInfo} title="消息中心" />
                                <Scene
                                    key="tab"
                                    tabs
                                    tabBarStyle={styles.tabBarStyle}
                                    tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}
                                >
                                    <Scene
                                        key="tab1"
                                        title="Tab #1"
                                        icon={TabIcon}
                                        navigationBarStyle={{ backgroundColor: 'white' }}
                                        titleStyle={{ color: 'black' }}
                                    >
                                        <Scene
                                            key="tab1_1"
                                            panHandlers={null}
                                            hideBackImage
                                            component={DataInfo}
                                            title="我的"
                                        />
                                    </Scene>
                                    <Scene key="tab2" title="Tab #2" icon={TabIcon} >
                                        <Scene
                                            key="tab2_1"
                                            component={LoginView}
                                            title="Tab #2_1"
                                            panHandlers={null}
                                            hideBackImage
                                            renderRightButton={() => <Text>Right</Text>}
                                        />
                                        <Scene
                                            key="tab2_2"
                                            component={LoginView}
                                            title="Tab #2_2"
                                            hideBackImage
                                            onBack={() => alert('Left button!')}
                                            backTitle="Left"
                                            duration={1}
                                        />
                                    </Scene>
                                    <Scene key="tab3" component={LoginView} title="Tab #3" hideTabBar icon={TabIcon} />
                                    <Scene key="tab4" component={LoginView} title="Tab #4" hideNavBar icon={TabIcon} />
                                </Scene>
                            </Scene>

                        </Scene>
                        <Scene key="drawer" component={NavigationDrawer}>

                        </Scene>
                    </Scene>
            </Router>
        )
    }
}


class LoginViews extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isShowLoginView: true,
        };
    }

    render() {
        var contentView = ''

        if (this.state.isShowLoginView) {
            contentView = (
                <LoginView />
            )
        } else {
            contentView = (
                <RegisterView />
            )
        }
        return (

            <View style={styles.container}>
                <View style={styles.upStyle}>
                    <Button style={this.state.isShowLoginView?styles.loginTapButtonStyle:styles.registerTapButtonStyle}
                            disabled={false}
                            onPress={()=>(this.setState({isShowLoginView:true}))}
                    >
                        登录</Button>
                    <Button style={this.state.isShowLoginView?styles.registerTapButtonStyle:styles.loginTapButtonStyle}
                            disabled={false}
                            onPress={()=>(this.setState({isShowLoginView:false}))}
                    >
                        注册</Button>
                </View>
                {contentView}
            </View>
        )
    }
}


class RegisterView extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
    }

    render() {
        return (
            <Text>hi</Text>
        )
    }
}

class LoginView extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isRemenberPwd: false,
        };
    }

    render() {
        return (
            <View style={{flex:6}}>
                <TextInput style={styles.textInputStyle} placeholder={'用户名'}
                           placeholderTextColor={"#DCDCDC"}
                           clearButtonMode="while-editing"
                />
                <TextInput style={styles.textInputStyle} placeholder={'密码'} secureTextEntry={true}
                           placeholderTextColor={"#DCDCDC"}
                           clearButtonMode="while-editing"
                />
                <View style={{marginTop:10,marginLeft:40}}>
                    <CheckBox
                        label='自动登录'
                        checked={this.state.isRemenberPwd}
                        onChange={(checked) => (this.setState({isRemenberPwd:!this.state.isRemenberPwd}))}
                    />
                </View>
                <Button containerStyle={styles.loginBtnStyle}
                        style={{fontSize: 20, color: 'green'}}
                        styleDisabled={{color: 'red'}}
                        onPress={Actions.indexDrawer}
                >
                    登录
                </Button>
                <View style={{justifyContent:'center',alignItems:'center',marginTop:20,marginBottom:20}}>
                    <Text style={{color:'gray'}}>
                        通过第三方账号登录
                    </Text>
                </View>
                <Button containerStyle={styles.loginBtnStyle}
                        style={{fontSize: 20, color: 'green'}}
                        styleDisabled={{color: 'red'}}
                >
                    CSDN 登录
                </Button>
            </View>
        )
    }
}

/***** model ******/
var userInfo = {
    name: '',
    pwd: '',
    isVaild(){
        if ((/^1[34578]\d{9}$/.test(this.name)) && this.pwd.length >= 6) {
            return true;
        } else
            return false;
    }

}
/***********/


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F2F2F2',
    },
    buttonContainerStyle: {},
    loginTapButtonStyle: {
        flex: 1,
        fontSize: 20,
        color: 'blue',
        width: width / 2
    },
    registerTapButtonStyle: {
        flex: 1,
        fontSize: 20,
        color: 'black',
        width: width / 2
    },
    upStyle: {
        flex: 1,
        marginTop: 60,
        flexDirection: "row",
        justifyContent: 'center'
    },
    textInputStyle: {
        marginLeft: 40,
        width: width - 80,
        height: 50,
        borderColor: '#CCCCCC',
        borderWidth: 0.5,
        borderRadius: 5,
        marginTop: 20,
        backgroundColor: 'white',
        paddingLeft:10
    },
    loginBtnStyle: {
        padding: 10,
        height: 45,
        overflow: 'hidden',
        borderRadius: 4,
        backgroundColor: 'white',
        marginLeft: 40,
        marginRight: 40
    }

});